<template>
    <div class="infotablemodal-page">
      <container-box :metaTitle="routeMeta.title || ''">
        <div slot="container">
          <mds-button type="primary" @click="openModal">详细信息弹框 - 表格式</mds-button>
          <mds-modal
              class="info-table-modal"
              :visibility="visibility"
              title="详细信息弹框"
              @ok="handleOk"
              width="936px"
              @close="handleClose"
              :mask="mask"
              :showClose="true"
          >
              <table cellspacing="0" cellpadding="0" class="table">
                  <tr>
                      <td>
                          <span class="label">姓名：</span>
                          <span class="content">张三</span>
                      </td>
                      <td>
                          <span class="label">申请部门：</span>
                          <span class="content">设计部</span>
                      </td>

                  </tr>
                  <tr>
                      <td>
                          <span class="label">职级获得时间：</span>
                          <span class="content">2019-02-02</span>
                      </td>
                      <td>
                          <span class="label">填报日期：</span>
                          <span class="content">2020-02-02</span>
                      </td>

                  </tr>
                  <tr>
                      <td>
                          <span class="label">公司地址：</span>
                          <span class="content">北京市朝阳酒仙桥北路</span>
                      </td>
                      <td>
                          <span class="label">工作城市：</span>
                          <span class="content nodata">未填写</span>
                      </td>
                  </tr>
                  <tr>
                      <td>
                          <span class="label">卖家手机：</span>
                          <span class="content">13800138000</span>
                      </td>
                      <td>
                          <span class="label">填报日期：</span>
                          <span class="content">2020-02-02</span>
                      </td>
                  </tr>
                  <tr>
                      <td>
                          <span class="label">身份证号：</span>
                          <span class="content">110100199303220025</span>
                      </td>
                      <td>
                          <span class="label">工作城市：</span>
                          <span class="content">北京市</span>
                      </td>
                  </tr>
                  <tr>
                      <td>
                          <span class="label">证件正面：</span>
                          <span class="content">
                              <mds-card class="mds-card" style="width: 267px" :loading="true">
                                  <div v-for="o in 4" :key="o" class="text item">
                                      {{'列表内容 ' + o }}
                                  </div>
                              </mds-card>
                          </span>
                      </td>
                      <td>
                          <span class="label">证件背面：</span>
                          <span class="content">
                              <mds-card class="mds-card" style="width: 267px" :loading="true">
                                  <div v-for="o in 4" :key="o" class="text item">
                                      {{'列表内容 ' + o }}
                                  </div>
                              </mds-card>
                          </span>
                      </td>
                  </tr>
              </table>
              <div slot="footer" style="text-align: right;">
                  <Mds-button type="primary" @click='handleOk' style="margin-left: 8px;">
                  保存
                  </Mds-button>
                  <Mds-button @click='handleOk' style="margin-left: 8px;">
                  取消
                  </Mds-button>
              </div>
          </mds-modal>
        </div>
      </container-box>
    </div>
</template>
<script>
import ContainerBox from '@/components/ContainerBox'
export default {
  components: {
    ContainerBox
  },
  computed: {
    routeMeta() {
      return this.$route.meta || {}
    }
  },
  data() {
    return {
      visibility: false,
      mask: true
    }
  },
  methods: {
    openModal() {
      this.visibility = true
    },
    handleOk() {
      this.visibility = false
    },
    handleClose() {
      this.visibility = false
    }
  }
}
</script>
<style>
    .info-table-modal .mds-modal-body {
        padding: 0px;
    }
    .info-table-modal .table {
        border-collapse: collapse;
        width: 100%;
        margin-top: -1px;
        margin-bottom: -1px;
    }
    .info-table-modal .table tr td{
        padding: 17px 28px;
        font-size: 14px;
        border: 1px solid rgba(240,242,245,1);
    }
    .info-table-modal .table .label{
        display: inline-block;
        width: 100px;
        text-align: right;
        color: #7F8FA4;
    }
    .info-table-modal .table .content{
        margin-left: 24px;
        color: #354052;
    }
    .info-table-modal .table .content.nodata {
        color: #D8DCE6;
    }
    .info-table-modal .table .content .mds-card {
        display: inline-block;
        vertical-align: top;
    }

    .info-table-modal .item {
        font-size:14px;
        font-weight:400;
        color:rgba(53,64,82,1);
        line-height:22px;
    }
    .info-table-modal .item + .item {
        margin-top: 16px;
    }

</style>
